<template>
  <view class="category-container">
    <!-- 安全区域顶部占位 -->
    <view
      class="safe-area-top"
      :style="{ height: safeAreaInsets.top + 'px' }"
    ></view>

    <!-- 页面主要内容 -->
    <view class="main-content">
      <view class="test-content">分类页面内容</view>
    </view>

    <!-- 安全区域底部占位 -->
    <view
      class="safe-area-bottom"
      :style="{ height: safeAreaInsets.bottom + 'px' }"
    ></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

const safeAreaInsets = ref({
  top: 0,
  bottom: 0,
});

// 获取安全区域信息
const getSafeAreaInsets = () => {
  // #ifdef APP-PLUS
  try {
    const systemInfo = uni.getSystemInfoSync();
    if (systemInfo.safeArea) {
      safeAreaInsets.value.top = systemInfo.safeArea.top;
      safeAreaInsets.value.bottom =
        systemInfo.windowHeight - systemInfo.safeArea.bottom;
    } else {
      // 默认值
      safeAreaInsets.value.top = 0;
      safeAreaInsets.value.bottom = 0;
    }
  } catch (e) {
    console.error("获取安全区域信息失败:", e);
  }
  // #endif

  // #ifndef APP-PLUS
  // H5 或小程序环境下的默认处理
  safeAreaInsets.value.top = 0;
  safeAreaInsets.value.bottom = 0;
  // #endif
};

onMounted(() => {
  getSafeAreaInsets();
});
</script>

<style scoped>
.category-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  flex: 1;
  padding: 20rpx;
}

.test-content {
  background-color: white;
  padding: 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  min-height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #333;
}
</style>
